<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1">
    <title>拼车订单详情</title>
    <meta name ="keywords" content="港珠澳头等舱">
    <meta name="description" content="港珠澳头等舱">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
    <link rel="stylesheet" type="text/css" href="../css/public.css">
    <link rel="stylesheet" type="text/css" href="../css/detail.css">
    <script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="../js/fit.js"></script>
    <script type="text/javascript" src="../js/moment.min.js"></script>
  </head>

  <body>

    <div class="container detail-container">
        <h1>
            订单已成交
            <em>¥ 692</em>
        </h1>
        <div class="detail-box">
            <ul class="detail-list">

                <!-- 发车时间、二维码 -->
                <li style="border-bottom:none">
                    <h3>3月15日 8:00 发车</h3>
                    <!-- <div class="code-box">
                        <img src="../image/code.jpg">
                        <p>乘车前请出示该二维码扫码验证</p>
                    </div> -->
                </li>
                <!-- 行程 -->
                <li>
                    <div class="tripblock">
                        <div>
                            <em>第1程</em>
                            <!-- <a href="#">地图定位 ></a> -->
                        </div>
                        <h3>珠海北站 - 珠海口岸</h3>
                        <ul class="data-list">
                            <li>
                                <span>车辆：</span>
                                <div>
                                    别克商务车 粤ABC123
                                </div>
                            </li>
                            <li class="seat">
                                <span>座位：</span>
                                <div>
                                    <em>前排</em>
                                    <em>后排</em>
                                    <em>后排</em>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tripblock">
                        <div>
                            <em>第2程</em>
                        </div>
                        <h3>珠海口岸 - 香港机场</h3>
                        <ul class="data-list">
                            <li>
                                <span>车辆：</span>
                                <div>
                                    奔驰商务车 粤ABC666
                                </div>
                            </li>
                            <li class="seat">
                                <span>座位：</span>
                                <div>
                                    <em>后排</em>
                                    <em>后排</em>
                                    <em>后排</em>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <!-- 联系人及订单 -->
                <li>
                    <h3>联系人</h3>
                    <ul class="data-list">
                        <li>
                            <span>姓名：</span>
                            <div>
                                郑建滨
                            </div>
                        </li>
                        <li>
                            <span>联系电话：</span>
                            <div>
                                13726202853
                            </div>
                        </li>
                    </ul>
                    <h3>订单信息</h3>
                    <ul class="data-list">
                        <li>
                            <span>订单编号：</span>
                            <div>
                                12312332
                            </div>
                        </li>
                        <li>
                            <span>预订日期：</span>
                            <div>
                                2019-02-25
                            </div>
                        </li>
                    </ul>
                </li>
                <!-- 退改票 -->
                <!-- <li>
                    <h3>退票</h3>
                    <ul class="data-list">
                        <li class="btnli">
                            <span>截止时间：</span>
                            <div>
                                3月10日 08:00
                                <button class="btn">可退票</button>
                            </div>
                        </li>
                    </ul>
                    <h3>改票</h3>
                    <ul class="data-list">
                        <li class="btnli">
                            <span>截止时间：</span>
                            <div>
                                3月10日 08:00
                                <button class="btn over">已过期</button>
                            </div>
                        </li>
                    </ul>
                </li> -->
            </ul>

            <!-- <div class="detail-bottom">
                <button class="btn" id="noticeBtn">退改票须知 >></button>
            </div> -->

        </div>
    </div>

    <!-- 退改签须知 -->
    <div class="uppage notice-uppage2" id="uppage_notice">
        <div class="uppage-bg close"></div>
        <div class="uppage-box">
            <div class="uppage-head">
                <span>退改票须知</span>
                <em class="close">X</em>
            </div>
            <div class="uppage-body notice-container">
                <h5>退票</h5>
                <p>退票说明退票说明退票说明，退票说明退票说明退票说明退票说明。退票说明退票说明，退票说明退票说明退票说明退票说明退票说明，退票说明退票说明退票说明退票说明退票说明。</p>
                <h5>改票</h5>
                <p>改票说明改票说明改票说明改票说明，改票说明改票说明改票说明改票说明，改票说明改票说明。改票说明改票说明改票说明改票说明，改票说明改票说明改票说明。改票说明改票说明改票说明，改票说明改票说明改票说明。</p>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="../js/index.js"></script>
    <script type="text/javascript">
      var poolingDetail = {
        notice: "#uppage_notice",

        // 打开须知
        noticeShow: function(){
            $(this.notice).show();
        },

        // 关闭须知
        noticeHide: function(){
            var _this = this;
            $(this.notice).addClass("hide");
            setTimeout(function(){
                $(_this.notice).removeClass("hide").hide();
            },500);
        },

        // 初始化
        init: function() {
            var _this = this;

            // 须知绑定点击事件
            $("#noticeBtn").bind("click",function(){
              _this.noticeShow();
            });

            // 关闭须知窗口
            $(this.notice).find(".close").bind("click",function(){
              _this.noticeHide();
            });
        }
      }
      poolingDetail.init();
    </script>

  </body>
</html>
